<template>
	<view class="">
		<e-popup mode="top" :safeAreaInsetBottom="false" :closeOnClickOverlay="true" round="16" bgColor="#f8f8f8"
			:show="show" @close="close">
			<view class="sort-box" :style="{'margin-top':  marginTop}">
				<scroll-view scroll-y="true">
					<view class="slider-box">
						<view class="slider-title">
							<text>{{$t('nearby.人均价格')}}</text>
							<text>{{getAveragePrice}}</text>
						</view>

						<view class="slider-view">
							<view class="slider-sum">
								<view>{{$unitEn}}{{slideMin}}</view>
								<view>{{$unitEn}}{{slideMax}}</view>
							</view>
							<view class="slider-center">
								<regionSlider :key="regionSliderPriceKey" :width="slideWidth" :height="slideHeight" :blockSize="slideBlockSize"
									:min="slideMin" :max="slideMax" backgroundColor="#F1F1F1" activeColor="#FF0000"
									:values="rangeValues" :step="step" @rangechange="onRangeChange">
								</regionSlider>
							</view>
						</view>

						<view class="slider-title">
							{{$t('nearby.营业时间')}}
							<text>{{getOpenTime}}</text>
						</view>
						<view class="slider-view">
							<view class="slider-sum">
								<view>{{timezhuan(slideMinTime)}}</view>
								<view>{{timezhuan(slideMaxTime)}}</view>
							</view>
							<view class="slider-center">
								<regionSlider :key="regionSliderTimeKey" :width="slideWidth" :height="slideHeight" :blockSize="slideBlockSize"
									:min="slideMinTime" :max="slideMaxTime" backgroundColor="#F1F1F1"
									activeColor="#FF0000" :values="rangeValuesTime" :step="stepTime"
									@rangechange="onRangeChangeTime">
								</regionSlider>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="sort-btn">
					<view @tap="hanldeReset">{{$t('nearby.重置')}}</view>
					<view @tap="handleSubmit">{{$t('nearby.完成')}}</view>
				</view>
			</view>
		</e-popup>
	</view>
</template>

<script>
	import regionSlider from './child/region-slider.vue';
	export default {
		components: {
			regionSlider
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			marginTop:String
		},
		data() {
			return {
				current: 0,
				value: 0,
				rangeValues: [0, 200], //设置初始值
				slideWidth: 680,
				slideHeight: 80,
				slideBlockSize: 40,
				slideMin: 0, //最小值
				slideMax: 200, //最大值
				step: 1, //步长值

				slideMinTime: 0,
				slideMaxTime: 1439,
				stepTime: 60,
				rangeValuesTime: [0, 1439],
				
				regionSliderPriceKey:"regionSliderPriceKey",
				regionSliderTimeKey:"regionSliderTimeKey"

			};
		},

		computed: {
			getAveragePrice() {
				const a = +this.rangeValues[0]
				const b = +this.rangeValues[1]
				let price
				if ((a != 0 && a != 200) || (b != 200 && b != 0)) {
					if (a == 0 && b < 200) {
						price = this.$unitEn + b + this.$t('nearby.以下')
					} else if (a > 0 && b == 200) {
						price = this.$unitEn + a + this.$t('nearby.以上')
					} else {
						price = this.$unitEn + a + '-' + this.$unitEn + b
					}
				}
				return price
			},
			getOpenTime() {
				const a = this.rangeValuesTime[0]
				const b = this.rangeValuesTime[1] == 1440 ? 1439 : this.rangeValuesTime[1]
				let time
				if ((a != 0 || b != 1439) && a != b) {
					time = this.timezhuan(a) + '~' + this.timezhuan(b)
				}
				return time
			}
		},
		methods: {
			handleSubmit() {
				const a = this.timezhuan(this.rangeValuesTime[0])
				const b = this.timezhuan(this.rangeValuesTime[1])
				this.$emit('change',[a,b])
				this.close()
			},
			hanldeReset() {
				this.rangeValues = [0, 200]
				this.rangeValuesTime = [0,1439]
				this.regionSliderTimeKey = this.regionSliderTimeKey + Math.random()
				this.regionSliderPriceKey = this.regionSliderPriceKey + Math.random()
			},
			onRangeChange(e) {
				this.rangeValues = [e.minValue, e.maxValue];
			},
			onRangeChangeTime(e) {
				this.rangeValuesTime = [e.minValue, e.maxValue]
			},
			timezhuan(value) {
				let time = (Math.floor(value / 60) < 10) ? '0' + (Math.floor(value / 60)) : (Math.floor(value / 60));
				let minute = ((value % 60).toFixed(0)) < 10 ? '0' + ((value % 60).toFixed(0)) : ((value % 60).toFixed(0))
				return time + ":" + minute
			},
			close() {
				this.$emit('close', this.show);
			},
		}
	};
</script>

<style scoped lang="scss">
	.sort-box {
		margin-top: 418rpx;

		.sort-btn {
			height: 112rpx;
			box-shadow: inset 0px 1px 0px 0px #F2F2F2;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 345rpx;
				height: 80rpx;
				border-radius: 200rpx;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 80rpx;
				text-align: center;

				&:nth-child(1) {
					border: 2rpx solid #DDDDDD;
					color: #333333;
				}

				&:nth-child(2) {
					margin-left: 20rpx;
					background: #FF0000;
					color: #FFFFFF;
				}
			}
		}

		scroll-view {
			max-height: 50vh;

			.slider-box {
				padding: 0rpx 20rpx;

				.slider-title {
					padding: 30rpx 0;
					font-size: 30rpx;
					color: #333333;

					text {
						font-size: 26rpx;
						color: #ff0000;
						padding-left: 10rpx;
					}
				}

				.select-box {
					display: flex;
					flex-wrap: wrap;

					.select-list {
						width: 163rpx;
						height: 64rpx;
						line-height: 64rpx;
						background: #F1F1F1;
						border-radius: 10rpx;
						text-align: center;
						font-size: 26rpx;
						color: #333333;
						border: 1rpx #F1F1F1 solid;
						margin-left: 20rpx;
						margin-top: 20rpx;

						&:nth-child(4n+1) {
							margin-left: 0;
						}

						&:nth-child(-n+4) {
							margin-top: 0;
						}
					}

					.active-view {
						background: #FFE5E5;
						border-radius: 10rpx;
						border: 1rpx solid #FF0000;
						color: #FF0000;
					}
				}

				.slider-view {
					padding-bottom: 20rpx;

					.slider-center {
						display: flex;
						justify-content: center;
					}

					.slider-sum {
						display: flex;
						justify-content: center;
						align-items: center;

						view {
							flex: 1;
							font-size: 24rpx;
							color: #FF0000;

							&:nth-child(1) {
								text-align: left;
							}

							&:nth-child(2) {
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
</style>
